<template>
    <div class="box">
        <div class="left" :class="{ 'TextColor': !isBool }">
            <div class="LeftContent" :class="{ 'backgroudColor': !isBool }" v-for="(item, i) in store.content" :key="i">
                <span :class="{ 'TextColor': !isBool }" @click="JumpDetails('details', item)">
                    <span id="changecolor">
                        {{ item}}
                    </span>
                    <div class="leftcontentbotton">
                        <span class="date" :class="{ 'TextColor': !isBool }">{{ store.date[i] }}</span>
                        <span :class="{ 'TextColor': !isBool }">
                            <el-icon>
                                <Paperclip />
                            </el-icon>
                            博客
                            &nbsp;
                            <el-icon>
                                <Paperclip />
                            </el-icon>
                            配置
                        </span>
                    </div>
                </span>
            </div>
        </div>
        <div class="right">
            <div class="top" :class="{ 'backgroudColor': !isBool }">
                <span :class="{ 'TextColor': !isBool }">个人信息</span>
                <div class="img">
                    <img src="../assets/QQ图片20230425204111.jpg" alt="">
                </div>
                <span class="name" :class="{ 'TextColor': !isBool }">
                    {{ store.$state.Name }}
                </span>
                <div class="label" :class="{ 'TextColor': !isBool }">
                    <div class="labelcontext">
                        <p>文章</p>
                        <span>{{ article }}</span>
                    </div>
                    <div class="labelcontext">
                        <p>标签</p>
                        <span>{{ Label }}</span>
                    </div>
                    <div class="labelcontext">
                        <p>归档</p>
                        <span>{{ file }}</span>
                    </div>
                </div>
                <div class="picture" :class="{ 'pictureColor': !isBool }">
                    <img src="../assets/GitHub-fill.png" alt="">
                </div>
            </div>
            <div class="botton" :class="{ 'backgroudColor': !isBool }">
                <span class="HeadLine" :class="{ 'TextColor': !isBool }">近期文章</span>
                <div class="bottoncontent" :class="{ 'TextColor': !isBool }">
                    <span v-for="(item,i) in store.content" :key="i">{{ item }}
                        <br>
                        {{store.date[i]}}
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { useRoute } from 'vue-router';
import { inject, provide, ref } from 'vue'
import { useCounterStore } from '../pinia/Pinia'
const router = useRouter()
const store = useCounterStore()
const route = useRoute()
let article = ref(store.articleTheme.length)
let Label = ref(8)
let file = ref(3)
const Name = route.query.id
// 接受传值
let isBool = inject('Bool')
let handline = inject('title')
// 跳转详情页
function JumpDetails(name, title) {
    router.push({ name: name })
    handline.value = title
}
</script>

<style lang="less" scoped>
.LeftContent {
    background-color: @subjectcolor;
}

.date {
    color: #222222;
}

.top,
.botton {
    background-color: @subjectcolor;
}

.box {
    margin: 30px auto;
    display: flex;
    justify-content: space-around;
    width: calc(100vw - 300px);
    height: calc(100vh - 120px);

    .left {
        width: 60vw;
        height: calc(100vh - 100px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;

        .LeftContent {
            display: flex;
            flex-direction: column;
            border-radius: 1rem;
            width: 50vw;
            height: 15vh;
            box-shadow: 0 2px 5px #0003, 0 2px 10px #0003;

            span {
                padding: 1.1rem;
                font-weight: 700;
                font-size: 1.4rem;
                cursor: pointer;
                transition: all 0.1s linear;
            }
            #changecolor{
                padding: 0rem;
            }
            #changecolor:hover {
                color: #3F5EFB;
            }

            .date {
                opacity: 0.7;
            }

            .leftcontentbotton {
                margin-top: 40px;
                height: 50px;
                display: flex;
                flex-direction: column;

                span {
                    padding: 0rem;
                    text-align: left;
                    font-size: 15px;
                }
            }
        }
    }

    .right {
        width: 20vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top,
        .botton {
            width: 15vw;
            height: 42vh;
            border-radius: 1rem;
            box-shadow: 0 2px 5px #0003, 0 2px 10px #0003;
        }

        .top {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            color: #222222;
            font-size: 18px;
            font-weight: 500;

            .name {
                font-size: 23px;
                font-weight: 600;
            }

            .img {
                width: 150px;
                height: 150px;
                overflow: hidden;
                border-radius: 50%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .label {
                width: 15vw;
                height: 45px;
                display: flex;
                justify-content: space-around;

                .labelcontext {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    p {
                        font-size: 15px;
                    }

                    span {
                        font-weight: 600;
                    }
                }
            }

            .picture {
                width: 35px;
                height: 35px;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                border-radius: 50%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .botton {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;

            .HeadLine {
                font-size: 18px;
                font-weight: 500;
            }

            .bottoncontent {
                width: 15vw;
                height: 34vh;
                display: flex;
                flex-direction: column;
                font-size: 17px;

                span {
                    padding: 0.5rem;
                }
            }
        }
    }
}

.HeadLine {
    color: #222222;
}

.backgroudColor {
    background-color: @changesubcolor;
}

.TextColor {
    color: white;
}

.pictureColor {
    background-color: white;
}
</style>